import Message from './index.vue'
let instances = []
let verticalTop = 16
let index = 0
export default {
    install(Vue) {
        function computedVerticalTop(position) {
            let filterInstances = instances.filter(instance => {
                return instance.position === position
            })
            return filterInstances.reduce((acc, cul) => {
                return cul.$el.offsetHeight + acc + verticalTop
            }, verticalTop)
        }

        function updateVerticalTop(instance) {
            let removerTop = instance.verticalTop;
            let index = 0;
            for (; index < instance.length; index++) {
                if (instances[index].id === instance.id) {
                    break
                }
            }
            instances.splice(index, 1)
            for (; index < instances.length; index++) {
                if (instances[index].position === instance.position) {
                    // let temp = instances[index].verticalTop
                    // instances[index].verticalTop = removerTop;
                    // removerTop = temp
                    [instances[index].verticalTop, removerTop] = [removerTop, instances[index].verticalTop]
                }

            }
        }

        function generateInstance(options) {
            console.log('generateInstance');
            console.log(Message);
            const Ctor = Vue.extend(Message)

            let instance = new Ctor({
                propsData: options,
            }).$mount(document.createElement('div'))
            instance.verticalTop = computedVerticalTop(instance.position)
            instance.id = "message-" + index++;
            instance.$once('close', function() {
                updateVerticalTop(instance);
            })
            return instance
        }
        Vue.prototype.$message = function(options) {
            let instance = generateInstance(options);
            instances.push(instance)
        }
    },
}